<template>
  <el-menu class="w-full" mode="horizontal" :ellipsis="false" background-color="#153E76" text-color="#fff"
    style="border-bottom: none;" active-text-color="#fff" @select="handlerChangeRouter">
    <el-menu-item class="w-[200px] h-full flex items-center">
      <span class="text-4xl">企业网盘</span>
    </el-menu-item>

    <el-menu-item index="/main">
      <el-icon>
        <Promotion />
      </el-icon>
      网盘
    </el-menu-item>
    <el-menu-item index="/share">
      <i class="el-icon">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
          <path fill="currentColor"
            d="M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z">
          </path>
          <path fill="currentColor"
            d="M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z">
          </path>
        </svg>
      </i>
      分享
    </el-menu-item>
    <!-- 两侧分隔符 -->
    <div class="flex-grow" />
    <el-menu-item index="4" key="">
      <el-dropdown>
        <span class="text-white flex items-center">
          <el-avatar class="mr-3" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          {{userInfo.nickname ? userInfo.nickname : userInfo.username}}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click.passive="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-menu-item>


  </el-menu>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '@/stores/user'

const Store = userStore()
const Router = useRouter()

const userInfo: any = computed(() => Store.user)
const handleLogout = () => {
  // 退出登录
  Store.userLogout()
}


const handlerChangeRouter = (index: any) => {
  if (index === "/main" || index === "/share") {
    Router.push(index)
  }
}

</script>